<template>
  <div>
    <vue-marquee style="height:150px;width:300px" :showProgress="false" direction="left">
        <vue-marquee-slide v-for="i in text" :key="i">
            <div class="item">{{ i }}</div>
        </vue-marquee-slide>
    </vue-marquee>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: "",
      list: [
        { ct: "222" },
        { ct: "333ssssssssssssssssssssssss" },
        { ct: "555555555555555555555555" },
        { ct: "44你好，4444441111111111111111111" },
        { ct: "666666666" },
        { ct: "7777,77" },
        { ct: "9999999999999" },
      ],
    };
  },
  mounted() {
    let arr = this.mathData(this.list, 4);
    let arrayNew = Array.from(arr, ({ ct }) => ct);
       console.log(Object.values(arrayNew))
    this.text = arrayNew;
  },
  methods: {
    mathData(arr, count) {
      let shuffled = arr.slice(0),
        i = arr.length,
        min = i - count,
        temp,
        index;
      while (i-- > min) {
        index = Math.floor((i + 1) * Math.random());
        temp = shuffled[index];
        shuffled[index] = shuffled[i];
        shuffled[i] = temp;
      }
      let res = shuffled.slice(min);
      return res;
    },
  },
};
</script>

<style  lang="scss" scoped>
.item{
  width: 90%;
}
</style>
